<template>
  <div>
 <!-- <el-upload
   class="upload-demo"
   ref="upload"
   action="/api/houtai/Fileupload/Fileupload/"
   :on-preview="handlePreview"
   :on-remove="handleRemove"
   :file-list="fileList"
   :onSuccess="uploadSuccess"
   :auto-upload="false">
   <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
   <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
   <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
 </el-upload> -->


 <el-upload
   ref="upload"
   action="process.env.API_HOST+'/houtai/Fileupload/Fileupload/'"
   list-type="picture-card"
   :limit="1"

   :before-upload="beforeAvatarUpload"
   :on-success="success"
   :auto-upload="false">
     <i slot="default" class="el-icon-plus"></i>
     <div slot="file" slot-scope="{file}">
       <img
         class="el-upload-list__item-thumbnail"
         :src="file.url" alt=""
       >
       <span class="el-upload-list__item-actions">
         <span
           class="el-upload-list__item-preview"
           @click="handlePictureCardPreview(file)"
         >
           <i class="el-icon-zoom-in"></i>
         </span>
         <span
           v-if="!disabled"
           class="el-upload-list__item-delete"
           @click="handleDownload(file)"
         >
           <i class="el-icon-download"></i>
         </span>
         <span
           v-if="!disabled"
           class="el-upload-list__item-delete"
           @click="handleRemove(file)"
         >
           <i class="el-icon-delete"></i>
         </span>
       </span>
     </div>
 </el-upload>
 <el-dialog :visible.sync="dialogVisible">
   <img width="100%" :src="dialogImageUrl" alt="">
 </el-dialog>

  <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
 </div>
</template>

<script>


export default {
    data() {
      return {
        dialogImageUrl: '',
        dialogVisible: false,
        disabled: false
      };
    },
    methods: {
      handleRemove(file) {
     this.$refs.upload.handleRemove(file)

        console.log(file);



      },
      submitUpload() {
              this.$refs.upload.submit();
            },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      success(response, file, fileList){
      
        console.log(response);
      
      },
      handleDownload(file) {
        console.log(file);
      },
       beforeAvatarUpload(file) {
              const isJPG = file.type === 'image/jpeg';
              const isLt2M = file.size / 1024 / 1024 < 1;

              if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG 格式!');
              }
              if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 1MB!');
              }
              return isJPG && isLt2M;
            }
    },
    
  }






   // export default {
   //     data() {
   //       return {
   //         fileList: [],

   //       };
   //     },
   //     methods: {
   //       submitUpload() {
   //          console.log("sss");
   //         this.$refs.upload.submit();

   //        //  this.$axios({
   //        //    url:"/api/ceshi/index/xinweng.php"
   //        //  }).then(res=>{
   //        //    console.log(res);
   //        //  })

   //        this.$axios.get('/api/ceshi/index/xinweng.php').then(function(response) {

   //                console.log(response);

   //            }).catch(function(error) {

   //                console.log(error);

   //            });

   //       },
   //       uploadSuccess (response, file, fileList) {
   //          console.log('上传文件', response)
   //         },
   //       handleRemove(file, fileList) {
   //         console.log(file, fileList);
   //       },
   //       handlePreview(file) {
   //         console.log(file);
   //       },





   //     }
   //   }
</script>

<style>
</style>
